<template>
  <router-view></router-view>
  <!--搜索框-->
  <div v-if="active ==1">
      <router-link to="/search">
<div class="search">
  <van-search v-model="value" >
  </van-search>
  
  <van-swipe class="mySwipe1" style="height: 20px;"  vertical :show-indicators="false" :autoplay="3000" >
      <van-swipe-item  
          v-for="i in searchData"
          :key="i.id"
      >{{ i.text }}</van-swipe-item>
  </van-swipe>
</div>
</router-link>
  
  <div class="main">
      <div class="left">
      <!-- 侧边导航 -->
      <van-sidebar v-model="active1" :replace="true" >
              <van-sidebar-item
              v-for="i in sortData"
              :key="i.id"
              :title="i.text"
              :line-height="30"
              />
      </van-sidebar>
  <!-- <div style="height:50px"> -->
  <!-- </div> -->

  </div>
  <div class="right">
      {{  }}
<div v-if="active1 == 0"><!-- 图片 -->
  <div class="advertisement">
      <van-image :radius="15"
  :position="top"
  :padding-top="1000"
  width="260"
  height="83.64"
  src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230303/ff9ec9601d49f001c28517c24f5e74aa-867981086.jpg?_w_=738&amp;_h_=240"
/>
  </div>
  
  <div class="title" >热门推荐</div>
      <!-- 自定义卡片 -->
      <div class="myCard">
      <!-- 标题 -->
      <router-link to="/goods">
      <van-card 
          currency=""
          price="到手价"
          desc="超轻折叠设计"
          title="OPPO Find N2"
          thumb="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221215/b6052c277cc9d8f7f553ffcd56036245-1711869841.png?_w_=320&amp;_h_=320" src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221215/b6052c277cc9d8f7f553ffcd56036245-1711869841.png?_w_=320&amp;_h_=320"
          origin-price="¥8989"
          url="./src/views/"
      />
      </router-link>
      <van-card 
          tag="新品"
          price="敬请期待"
          desc="性能赢家"
          
          title="一加 Ace 2V"

          thumb="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230227/d8c73e9813a0f3360b67076a090dd32d-65775711.png?_w_=320&amp;_h_=320" src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230227/d8c73e9813a0f3360b67076a090dd32d-65775711.png?_w_=320&amp;_h_=320"
          />
          
      <van-card
          tag="新品"
          price="189"
          desc="空间环绕 大场面"
          title="OPPO Enco Air3 真无..."
          thumb="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230216/4374263976e2a8994045f278ab419704-328192415.png?_w_=320&amp;_h_=320" src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230216/4374263976e2a8994045f278ab419704-328192415.png?_w_=320&amp;_h_=320"
      />
      <van-card
          price="2189"
          desc="超轻折叠设计"
          title="OPPO Find N2"
          thumb="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221215/b6052c277cc9d8f7f553ffcd56036245-1711869841.png?_w_=320&amp;_h_=320" src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221215/b6052c277cc9d8f7f553ffcd56036245-1711869841.png?_w_=320&amp;_h_=320"
      />
      <van-card
          price="1999"
          desc="80W超级闪充"
          title="OPPO K10 Pro"
          thumb="https://dsfs.oppo.com/omp/1649994424283-_-8d32e3f57c4d428e9cfbb84016206384.png?_w_=320&amp;_h_=320" src="https://dsfs.oppo.com/omp/1649994424283-_-8d32e3f57c4d428e9cfbb84016206384.png?_w_=320&amp;_h_=320"
      />
      <van-card
          price="3099"
          desc="性能 自由"
          title="一加 Ace 2"
          thumb="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230207/abab36e819d5b7500e948209c7b4b311841473917.png?_w_=320&amp;_h_=320" src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230207/abab36e819d5b7500e948209c7b4b311841473917.png?_w_=320&amp;_h_=320"
      />
      <van-card
          price="2299"
          desc="骁龙 870 处理器"
          title="OPPO Pad"
          thumb="https://dsfs.oppo.com/omp/1658805204562-_-2b70fe81cc0f4e0286c52f4caba608ce.png?_w_=320&amp;_h_=320" src="https://dsfs.oppo.com/omp/1658805204562-_-2b70fe81cc0f4e0286c52f4caba608ce.png?_w_=320&amp;_h_=320"
      />
      <van-card
          price="1899"
          desc="连续血氧监测"
          title="OPPO Watch 3 系列全智能..."
          thumb="https://dsfs.oppo.com/omp/1660129796666-_-3ad0588060dd42a09f45dd7b11c8277d.png?_w_=320&amp;_h_=320" src="https://dsfs.oppo.com/omp/1660129796666-_-3ad0588060dd42a09f45dd7b11c8277d.png?_w_=320&amp;_h_=320"
      />
      </div>
      

  </div>
      <div v-if="active1 == 1">
          {{ active }}
      </div>
      </div>
      </div>
  </div>
      <Index div v-if="active ==0" />
      <div v-if="active ==2">购物车</div>
      <div v-if="active ==3">我的</div>
      <van-tabbar v-model="active" 
      active-color="red"
      >
      <van-tabbar-item>
      <span>首页</span>
      <template #icon="props">
      <div 
      class="iconImg"
      :class="props.active ? 'homeActive':'homeInactive'">
      </div>
      </template>
  </van-tabbar-item>

      <van-tabbar-item icon="search">
      <span>分类</span>
      <template #icon="props">
      <div 
      class="iconImg"
      :class="props.active ? 'sortActive':'sortInactive'">
      </div>
      </template>
  </van-tabbar-item>
  <van-tabbar-item icon="shopping">   
      <span>购物车</span>
      <template #icon="props">
      <div 
      class="iconImg"
      :class="props.active ? 'shoppingActive':'shoppingInactive'">
      </div>
      </template>
  </van-tabbar-item>
      <van-tabbar-item icon="nabs">
      <span>我的</span>
      <template #icon="props">
      <div 
      class="iconImg"
      :class="props.active ? 'nabsActive':'nabsInactive'">
      </div>
      </template></van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { ref } from "vue";
import Index from "@/views/IndexView.vue";
import Goods from "@/views/GoodsView.vue";
import search from "@/views/searchView.vue";
const active1 = ref(0);
const active = ref(1);
const sortData = [
  { id: 1, text: "热门推荐" },
  { id: 2, text: "OPPO" },
  { id: 3, text: "一加" },
  { id: 4, text: "平板电脑" },
  { id: 5, text: "智能耳机" },
  { id: 6, text: "智能穿戴" },
  { id: 7, text: "智能电视" },
  { id: 8, text: "智美生活" },
  { id: 9, text: "定制服务" },
  { id: 10, text: "原装配件" },
  { id: 11, text: "数码周边" },
  { id: 12, text: "家用电器" },
  { id: 13, text: "个护健康" },
  { id: 14, text: "生活日用" },
  { id: 15, text: "文创潮玩" },
  { id: 16, text: "保障服务" },
  ];
const searchData =[
      { id: 1, text: "一加 Ace 2V" },
      { id: 2, text: "Find N2 系列" },
      { id: 3, text: "Reno9 系列" },
      { id: 4, text: "新品蓝牙耳机" },
      { id: 5, text: "全智能手表" },
  ];
const swipeData = [
  {
      id: 1,
      src: "https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230228/113b10bb2b16357655aa002c64d49ae6-2046135723.jpg?_w_=738&amp;_h_=240",
  },
  {
      id: 2,
      src: "https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230111/d9713856e464b13a364b7b90559c5389-1722688532.png?_w_=738&amp;_h_=240",
  },
  {
      id: 3,
      src: "https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230227/b7a4bd27d72bd6690af57202d5e290ba281276790.jpg?_w_=738&amp;_h_=240",
  },
  ];
</script>
<style lang="less" scoped>
.mySwipe1{
  position:fixed;
  top: 15px;
  left: 50px;
  color: #777;
}
:deep(.van-search-3-input){
  background-color: #00000000;
}
:deep(.van-field__body){
  background-color: #00000000;

}
:deep(.van-cell__value){
  background-color: #00000000;
}
:deep(.van-cell){
  background-color: #00000000;
  height: 33px;
}
:deep(.van-search__content){
  background-color: #00000000;
}
:deep(.van-search){
  background-color: #00000000;
  height: 46px;
}
:deep(.van-icon-search){
  height: 18px;
  width: 18.4px;
}
:deep(.van-swipe-item){
  color: #B2B2B2;
  font-size: 14px;
}
.search{
  background-color: #00000000;
  padding: 6.5px, 15px;
  
}
.iconImg{
  width: 24px;
  height: 24px;
  margin: 0;
  background-size: 24px!important;
}
.homeActive{
  background: url("src/assets/icon1.png")0px -24px;
}
.homeInactive {
  background: url("src/assets/icon2.png");
}
.sortActive {
  background: url("src/assets/icon3.png") 0px -72px;
}
.sortInactive {
  background: url("src/assets/icon4.png") 0-48px;
}
.shoppingActive {
  background: url("src/assets/icon5.png") 0px -120px;
}
.shoppingInactive {
  background: url("src/assets/icon6.png") 0px -96px;
}
.nabsActive {
  background: url("src/assets/icon7.png") 0px -168px;
}
.nabsInactive {
  background: url("src/assets/icon8.png") 0px -144px;
}

.main {
      height:629px;
      display: flex;
      justify-content: space-between;
      background-color: #f6f3f3;
  .left {
      // float: left;
      width: 80px;
      height: 580px;
      overflow: auto;
      margin-right: 0px;
      :deep(.van-sidebar-item){
          height: 53px;
          width: 80px;
          background-color: #f6f3f3;
      }
      :deep(.van-badge__wrapper){
          position: absolute;
          left: 6px;
          top: 0px;
          right: 6px;
          bottom: 0px;
          height: 53px;
          width: 70px;
      }
      :deep(.van-sidebar-item--select:before){
          background-color: #000000;
      }
      :deep(.van-sidebar-item__text){
          position: absolute;
          text-align: center;
          line-height: 53px;
          height: 53px;
          width: 70px;
      }
  }
  .right {
      // position: sticky;
      // top: 46px;
      // right: 0;
      background-color: rgb(246, 243, 243);
      // float: right;
      width: calc(100% - 95px);
      height: calc(100vh - 96px);
      // height: 800px;
      overflow: auto;
      :deep(.van-card) {
          padding: 10px;
          margin:0px, 0px, 8px;
          border-radius: 10px;
      }
      .myCard{
          margin:0px, 0px, 8px;
          width: 257.2px;
          height: 80px;
          border-radius: 50px;
      }
      .title {
          color:#000000;
          font-size: 14px;
          height: 44px;
          // widows: 257.2px;
          line-height: 45px;
          // border-top: 200px;
          // border-radius: 20px;
      }
      .advertisement {
          padding-top: 6px;
      }
      :deep(.van-image_img){
          // position:absolute;
          padding-top: 100px;
          // top: 50px;
      }
      :deep(.van-card__title){
          color: #000000D9;
      }
      :deep(.van-card__desc){
          color: #0000004D;
      }
      :deep(.van-card__price-integer){
          font-size: 12px;
      }
      :deep(.van-tag){
          background-color: #000000;
          border-radius: 2px;
      }
      }
  }

</style>
<style>
  :root {
      --van-card-font-size : 10px;
      --van-card-background: #FFFFFF;
      --van-tag-text-color:#FFFFFF;
      --van-card-thumb-size: 60px;
      --van-card-padding: 10px;
      --van-sidebar-font-size:12px;
      --van-card-price-color:#000000D9;
      /* --van-card-thumb-radius:10px; */
      --van-sidebar-line-height:80px; 
  }
  ::-webkit-scrollbar { width: 0!important }
</style>